<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">

        <!-- title -->
        <div class="normal-box-hd clearfix">
            <div class="normal-box-title">
            <div class="decorate-square"></div>
            <h2>用户管理</h2>
            </div>
        </div>

        <!-- 搜索 -->
        <div class="normal-box-bd">
            <div class="clearfix mb-20">
                <Button custom-icon="iconfont icon-fangkuai2" type="primary" size="small" style="float:right"  @click="show_create">新建用户</Button>
                <Input class="mr-10" v-model="queryData.userId" :clearable=true placeholder="卡号" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.name" :clearable=true placeholder="姓名" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.phone" :clearable=true placeholder="手机号" style="width: 200px"/>
                <Col span="4" class="mr-10">
                <sele @ProvinceData="childByValue"></sele>
              </Col>
                <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getList">查找</Button>
            </div>
        </div>

        <div>
            <i-table stripe highlight-row border :content="self" :columns="Tcolumns" :data="userList"></i-table>
        </div>
        <div class="page">
          <Page :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page" show-total show-elevator @on-change="changepage"></Page>
        </div>

        <!--新建/修改用户-->
        <Modal v-model="newUser.show_modal" :title="newUser.modal_title" :loading="newUser.loading"
          @on-ok="sendPost">
          <Form ref="check" :model="newUser.data" :label-width="80" :rules="newUser.rules">
            <FormItem label="姓名" prop="name">
              <Input placeholder="请输入" v-model="newUser.data.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="卡号" prop="id">
              <Input placeholder="请输入" v-model="newUser.data.id" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="地区">
              <Col span="18" class="mr-10">
                <sele @ProvinceData="childByValue_"></sele>
              </Col>
            </FormItem>
            <FormItem label="地址" prop="address">
              <Input placeholder="请输入" v-model="newUser.data.address" style="width:300px;"/>
            </FormItem>
            <FormItem label="电话" prop="mobilephone">
              <Input placeholder="请输入" v-model="newUser.data.mobilephone" style="width:300px;"/>
            </FormItem>

            <FormItem label="备注" prop="remark">
              <Input placeholder="请输入" v-model="newUser.data.remark" style="width:300px;"/>
            </FormItem>
          </Form>
        </Modal>

    </div>
  </div>
</template>

<script>
import userApi from '@/api/pingHu/user.js'
// import { Message } from 'iview'
import sele from '@/view/test/city.vue'
export default {
  components: {
    sele
  },
  data () {
    return {
      userList: [],
      keyWords: '', // 搜索关键字
      disabled: false, // 卡号输入禁用
      // 新增用户
      newUser: {
        show_modal: false,
        is_create: true,
        loading: true,
        modal_title: '新增用户',
        rules: { // check
          id: [],
          mobilephone: [],
          name: [
            {
              required: true,
              message: '请填写姓名',
              trigger: 'blur'
            }
          ],
          area: [
            {
              required: true,
              message: '请填写地区',
              trigger: 'blur'
            }
          ],
          address: [
            {
              required: true,
              message: '请填写详细地址',
              trigger: 'blur'
            }
          ]
        },
        data: {
          id: '',
          name: '',
          remark: '',
          address: '',
          mobilephone: ''
        }
      },

      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        userId: '',
        name: '',
        phone: ''
      },

      // 表格配置
      self: this,
      Tcolumns: [
        { align: 'center', title: '卡号', key: 'id', width: 120 },
        { align: 'center', title: '积分余额', key: 'integral', minWidth: 100 },
        { align: 'center', title: '信用', key: 'creditValue', minWidth: 50 },

        { align: 'center', title: '姓名', key: 'name', minWidth: 80 },
        { align: 'center', title: '手机', key: 'mobilephone', width: 120 },
        {
          align: 'center',
          title: '审核状态',
          key: 'review',
          minWidth: 100,

          render: (create, params) => {
            return create('div', {
              style: {
                color: params.row.userStatus == 0 ? '#000' : '#f00',
                fontWeight: 900
              }
            }, params.row.review == 0 ? '已审核' : '未审核')
          }
        },
        {
          align: 'center',
          title: '用户状态',
          minWidth: 100,
          render: (create, params) => {
            console.log()
            return create('div', {
              style: {
                background: params.row.userStatus == 0 ? '#02d792' : '#ff4366',
                color: '#fff',
                borderRadius: '20px'
              }
            }, params.row.userStatus == 0 ? '正常' : '冻结')
          }
        },
        { align: 'center', title: '小区', key: 'comminid', minWidth: 100 },
        { align: 'center', title: '性别', key: 'sex', minWidth: 50 },
        { align: 'center', title: '住址', key: 'address', minWidth: 100 },
        { align: 'center', title: '注册时间', key: 'registertime', width: 160 },
        { align: 'center', title: '备注', key: 'remark', width: 200 },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (create, params) => {
            // 创建父节点
            return create('div', [
              // 创建按钮
              create('i-button', {
                props: { type: 'primary', size: 'small' },
                style: { margin: '0 3px' },
                on: {
                  click: () => {
                    this.show_update(params.row.id)
                  }
                }
              }, '修改'),
              create('i-button', {
                props: { type: 'error', size: 'small' },
                style: { margin: '0 3px' },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')

            ])
          }
        }

      ]

    }
  },
  mounted () {
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getList()
  },
  methods: {
    // 获取用户列表
    async getList () {
      let data = await userApi('get', this.queryData, 'page')
      this.queryData.totalRecord = data.totalRecord
      this.userList = data.list
    },

    // 分页切换
    changepage (index) {
      this.queryData.page = index
      this.getList()
    },

    // 新建用户模态框
    show_create () {
      this.disabled = false
      let qwq = this.newUser
      this.newUser.rules.id = [
        { required: true, min: 11, max: 11, message: '请填写11位的卡号', trigger: 'blur' },
        { type: 'number',
          trigger: 'blur',
          message: '卡号类型为数字',
          transform (value) { return Number(value) } } ]

      this.newUser.rules.mobilephone = [
        { required: true, min: 11, max: 11, message: '请填写正确的手机号', trigger: 'blur' },
        { type: 'number',
          trigger: 'blur',
          message: '手机号码格式错误',
          transform (value) { return Number(value) } } ]

      this.$refs['check'].resetFields() // 清空内容
      qwq.is_create = true
      qwq.modal_title = '添加用户'
      qwq.show_modal = true // 模态框显示
    },

    // 修改用户模态框
    async show_update (index) {
      this.$refs['check'].resetFields()
      this.disabled = true
      let qwq = this.newUser
      qwq.rules.id = []
      qwq.is_create = false
      qwq.modal_title = '修改用户'
      let data = await userApi('get', {}, index)
      console.log(data)
      this.clearQuery()
      // 数据填充
      let userData = this.newUser.data
      userData.id = data.id
      userData.name = data.name
      userData.remark = data.remark
      userData.address = data.address
      userData.mobilephone = Number(data.mobilephone)
      qwq.show_modal = true // 模态框显示
    },

    // 查询清空
    clearQuery () {
      this.queryData.userId = ''
      this.queryData.name = ''
      this.queryData.phone = ''
    },

    // 用户数据提交
    sendPost () {
      this.$refs['check'].validate(async valid => {
        // console.log(valid);
        if (!valid) {
          this.changeLoading()
        }
        if (valid) {
          let qwq = this.newUser.is_create ? 'post' : 'put'
          let url = this.newUser.is_create ? '' : 'id'
          let result = await userApi(qwq, this.newUser.data, url)
          if (result) {
            this.$Message.success('操作成功')
            // console.log(result);
            this.getList()
            this.newUser.show_modal = false
            return
          }
          // console.log(result);
          this.$Message.error('操作失败')
        }
      })
    },

    // 改变load状态
    changeLoading () {
      this.newUser.loading = false
      this.$nextTick(() => {
        this.newUser.loading = true
      })
    },

    // 删除
    remove (index) {
      const _id = String(this.userList[index].id)
      const _name = this.userList[index].name
      this.$Modal.confirm({
        title: '删除确认',
        content:
          '<p>你确认要删除姓名为 <strong>' + _name +
          '</strong> 的记录吗？</p>',
        loading: true,
        onOk: async () => {
          let result = await userApi('delete', { id: _id }, 'id')
          if (result) {
            this.$Message.success('操作成功')
            this.getList()
            this.$Modal.remove()
            return
          }
          this.$Message.error('操作失败' + e)
          this.$Modal.remove()
        }
      })
    },

    // 六级联动数据获取
    childByValue (data) {
      let area = this.queryData
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.strtid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    },
    childByValue_ (data) {
      let area = this.newUser.data
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.roomid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    }

  }

}
</script>

<style>
    td[class="y ivu-table-column-center"] {background: #02D792 !important; color: #fff;}
    td[class="n ivu-table-column-center"] {background: #f00 !important; color: #fff;}
    .page {padding: 1em .5em;}
</style>
